<template>
   <header> 
      <nav class="nav"> 
        <RouterLink  v-for="(item, index) in routes" :key="index" :to="item.path" >{{item.meta.title}}</RouterLink> 
      </nav> 
  </header> 
</template>
<script setup>
// import { defineComponent } from '@vue/composition-api'
import { RouterLink, RouterView } from 'vue-router' 
import router from '../router/index'
import {ref,onMounted,reactive}from "vue"  

import GUI from "lil-gui";
const myObject = {
	myBoolean: true,
	myFunction: function() {  },
	myString: 'lil-gui',
	myNumber: 0,
  color:"#000"
}  
let routes=reactive(router.getRoutes()); 
let gui = new GUI();
let folder = gui.addFolder("材质相关属性");
  folder.add( myObject, 'myBoolean' );  // bool值是checkbox
  folder.add( myObject, 'myFunction' ).name("我是按钮"); //函数是按钮
  folder.add( myObject, 'myString' );   // 字符串是输入框
  folder.add( myObject, 'myNumber' );   // 数字是输入框
  //拖拉最大最小值
  folder.add( myObject, 'myNumber', 0, 1 );
  folder.add( myObject, 'myNumber', 0, 100, 2 ); // snap to even numbers 
  //数组是下拉
  folder.add( myObject, 'myNumber', [ 0, 1, 2 ] );
  //对象都是下拉
  folder.add( myObject, 'myNumber', { Label1: 0, Label2: 1, Label3: 2 } );
  //颜色 
  folder.addColor( myObject, 'color' ).onChange( value => {
		console.log( value );
	} );

onMounted(async ()=>{
  console.log("查看路由地址",routes); 
})  

</script> 
<style>
 .nav{
  display: grid;
  /* grid-template-columns:100px 100px; 显示定义列 指定数值分配列 */
/* grid-template-columns:2fr 1fr 1fr;  //等比分配 */
  /* grid-template-columns: repeat(12,1fr); */
  /* grid-template-columns: repeat(12,1fr 2fr); //重复12个 1fr 2fr */
  /* grid-auto-columns:100px;   //隐式列  根据内容个数分配宽度为100px的列数 如果一行不够会换行 */
  /* grid-auto-rows:30px; */
  grid-template-columns: repeat(auto-fill,minmax(100px,1fr)) ;
  grid-auto-rows:minmax(30px,auto);  /* 最小高度是300，如若超了可以 */
  grid-gap:5px;
  gap:5px; /* 行间距 列间距 */
  margin:10px;
 }
.nav >a{ 
    border-radius: 5px; 
    text-align: center;
    text-decoration: none;
    padding: 10px;
    background-color: rgb(207, 232, 220);
    border: 2px solid rgb(79, 185, 227); 
    color:#333;
 }
</style>
